<!DOCTYPE html>
<html lang="zh-EN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }








    /* .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    } */

    .box {

        border: 1px solid pink;
        /* overflow: hidden; */
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;

        /*多个盒子纵向排序找标准流 横向排列找浮动*/
        /* float:左浮or右浮; */
        /*1.浮动的元素会脱标（脱离标准流）
        2.浮动的盒子不在保留原来位置
        3.浮动盒子在一行显示  宽度不够会另起换行
        4.添加float变成行内块元素   且大小由添加内容决定
        */
    }

    .box2 {
        float: left;
        width: 300px;
        height: 700px;
        background-color: blueviolet;
    }

    .footer {
        height: 400px;
        width: 400px;
        background-color: rgb(15, 3, 27);
    }

    .clear {
        clear: both;
        /*clear:both清除左右两侧的浮动 */
        /*我们不想给父盒子高度   想要浮动的子元素去撑开父盒子*/
    }
</style>

<body>
    <div class="box clearfix">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <!-- <div class="clear"></div> -->
    </div>

    <div class="footer"></div>


    <script>
    //清除浮动的方法
    //1. 额外标签法    如上让class 为clear的div 隔开 footer div(结构化差) 要求必须是块级元素
    //2. 给父级添加 overflow 属性   overflow:hidden (子不教父之过)
    //3. after伪元素法        相当于额外标签法的class版
    //4. 双伪元素清除浮动      
    </script>
</body>

</html>